﻿<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license.
    See full license in root of repo. -->

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>Settings</title>
    <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.1.min.js"></script>

    <!-- For the Office UI Fabric, go to http://aka.ms/office-ui-fabric to learn more. -->
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.1.0/fabric.min.css">
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.1.0/fabric.components.min.css">

    <!-- Template styles -->
    <link href="../../../common.css" rel="stylesheet" />
    <link href="settings.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="settings.js"></script>
    <script type="text/javascript" src="ContextualMenu.js"></script>
</head>
<body class="ms-font-l ms-settings">
    <main class="ms-settings__main">
        <div class="ms-settings__header">
            <button class="ms-Button ms-Button--command" id="myButton">
                <span class="ms-Button-icon">
                    <i class="ms-CommandBarItem-icon ms-Icon ms-Icon--menu"></i>
                </span>
            </button>
            <ul class="ms-ContextualMenu" id="myDropdown">
                <li class="ms-ContextualMenu-item">
                    <a class="ms-ContextualMenu-link" href="#">Page 1</a>
                </li>
                <li class="ms-ContextualMenu-item">
                    <a class="ms-ContextualMenu-link ms-ContextualMenu-link--hasMenu" href="#">Page 2</a>
                    <i class="ms-ContextualMenu-subMenuIcon ms-Icon ms-Icon--chevronDown"></i>
                    <ul class="ms-ContextualMenu">
                        <li class="ms-ContextualMenu-item">
                            <a class="ms-ContextualMenu-link" href="#">Page 2.1</a>
                        </li>
                        <li class="ms-ContextualMenu-item">
                            <a class="ms-ContextualMenu-link" href="#">Page 2.2</a>
                        </li>
                        <li class="ms-ContextualMenu-item">
                            <a class="ms-ContextualMenu-link is-selected" href="#">Page 2.3</a>
                        </li>
                    </ul>
                </li>
                <li class="ms-ContextualMenu-item">
                    <a class="ms-ContextualMenu-link" href="#">Page 3</a>
                </li>
                <li class="ms-ContextualMenu-item">
                    <a class="ms-ContextualMenu-link ms-ContextualMenu-link--hasMenu" href="#">Page 4</a>
                    <i class="ms-ContextualMenu-subMenuIcon ms-Icon ms-Icon--chevronDown"></i>
                    <ul class="ms-ContextualMenu">
                        <li class="ms-ContextualMenu-item">
                            <a class="ms-ContextualMenu-link" href="#">Page 4.1</a>
                        </li>
                        <li class="ms-ContextualMenu-item">
                            <a class="ms-ContextualMenu-link" href="#">Page 4.2</a>
                        </li>
                    </ul>
                </li>
                <li class="ms-ContextualMenu-item ">
                    <a class="ms-ContextualMenu-link" href="#">
                        <span class="ms-Icon ms-Icon--gear"></span> Settings
                    </a>
                </li>
                <li class="ms-ContextualMenu-item ">
                    <a class="ms-ContextualMenu-link" href="#">
                        <span class="ms-Icon ms-Icon--sites"></span> Sign-out
                    </a>
                </li>
            </ul>
        </div>
        <section class="ms-settings__content ms-font-m ms-fontColor-neutralPrimary">
            <div class="ms-font-xxl ms-settings__content__title">Settings</div>
            <div class="ms-font-xl ms-settings__content__subtitle">Privacy and services</div>
            <div class="ms-Toggle">
                <span class="ms-Toggle-description">Save password</span>
                <input type="checkbox" id="demo-toggle-3" class="ms-Toggle-input">
                <label for="demo-toggle-3" class="ms-Toggle-field">
                    <span class="ms-Label ms-Label--off">Off</span>
                    <span class="ms-Label ms-Label--on">On</span>
                </label>
            </div>
            <div class="ms-Toggle">
                <span class="ms-Toggle-description">Save form entries</span>
                <input type="checkbox" id="demo-toggle-1" class="ms-Toggle-input">
                <label for="demo-toggle-1" class="ms-Toggle-field">
                    <span class="ms-Label ms-Label--off">Off</span>
                    <span class="ms-Label ms-Label--on">On</span>
                </label>
            </div>
            <div class="ms-font-xl ms-settings__content__subtitle">Map</div>
            <div class="ms-ChoiceFieldGroup">
                <div class="ms-ChoiceField">
                    <input id="radio1-a" class="ms-ChoiceField-input" type="radio" name="radio1" checked="checked">
                    <label for="radio1-a" class="ms-ChoiceField-field">
                        <span class="ms-Label">Traffic</span>
                    </label>
                </div>
                <div class="ms-ChoiceField">
                    <input id="radio1-b" class="ms-ChoiceField-input" type="radio" name="radio1">
                    <label for="radio1-b" class="ms-ChoiceField-field">
                        <span class="ms-Label">Satellite</span>
                    </label>
                </div>
                <div class="ms-ChoiceField">
                    <input id="radio1-c" class="ms-ChoiceField-input" type="radio" name="radio1">
                    <label for="radio1-c" class="ms-ChoiceField-field">
                        <span class="ms-Label">Terrain</span>
                    </label>
                </div>
            </div>
            <div class="ms-font-xl ms-settings__content__subtitle">Clear data</div>
            <div class="ms-ChoiceField">
                <input id="demo-checkbox-formdata" class="ms-ChoiceField-input" type="checkbox" checked="checked">
                <label for="demo-checkbox-formdata" class="ms-ChoiceField-field">
                    <span class="ms-Label">Form Data</span>
                </label>
            </div>
            <div class="ms-ChoiceField">
                <input id="demo-checkbox-passwords" class="ms-ChoiceField-input" type="checkbox">
                <label for="demo-checkbox-passwords" class="ms-ChoiceField-field">
                    <span class="ms-Label">Passwords</span>
                </label>
            </div>
            <div class="ms-ChoiceField">
                <input id="demo-checkbox-cached" class="ms-ChoiceField-input" type="checkbox">
                <label for="demo-checkbox-cached" class="ms-ChoiceField-field">
                    <span class="ms-Label">Cached data and files</span>
                </label>
            </div>
            <div class="ms-font-xl ms-settings__content__subtitle">Support</div>
            <p class="ms-font-m ms-settings__content--link">Send feedback</p>
            <p class="ms-font-m ms-settings__content--link">Help center</p>
            <div class="ms-font-xl ms-settings__content__subtitle">About this Add-in</div>
            <p class="ms-font-m ms-settings__content__text">My Add-in Name v1.0.0.2<br />&copy; 2016 Contoso Co.</p>
            <a href="privacy.html"><p class="ms-settings__content--link">Privacy Policy</p></a>
        </section>
    </main>
    <footer class="ms-settings__footer ms-bgColor-themePrimary">
        <div class="ms-settings__footer--left">
            <img src="/assets/logo-filled.png" />
            <h1 class="ms-font-xl ms-fontWeight-semilight ms-fontColor-white">My Add-in Name</h1>
        </div>
    </footer>
</body>
</html>

